import { Space } from 'antd';
import type { ColumnType } from 'antd/lib/table';
import React, { useState } from 'react';

import CustomTable from '@/components/CustomTable';

import ChangeAccessCodeModal from './ChangeAccessCodeModal';
import KeyDelteModal from './KeyDeleteModal';

interface TableData {
  index: number;
  keyType: string;
  length: number;
  state: string;
}

interface KeyTableProps {
  keyTable: TableData[] | undefined;
  keyType: number;
  total: number;
  page: number;
  pageSize: number;
  setPage: (page: number) => void;
  setPageSize: (pageSize: number) => void;
}

const KeyTable: React.FC<KeyTableProps> = ({
  keyTable,
  keyType,
  total,
  page,
  pageSize,
  setPage,
  setPageSize,
}) => {
  const [visible, setVisible] = useState(false);
  const [delVisible, setDelVisible] = useState(false);
  const [keyIndex, setKeyIndex] = useState<number>(0);

  const columns: (ColumnType<TableData> & { align?: 'left' | 'right' | 'center' })[] = [
    {
      title: '索引',
      dataIndex: 'index',
      key: 'index',
      width: 160,
      align: 'center',
    },
    {
      title: '密钥类型',
      dataIndex: 'keyType',
      key: 'keyType',
      width: 220,
      align: 'center',
    },
    {
      title: '长度',
      dataIndex: 'length',
      key: 'length',
      width: 250,
      align: 'center',
      render: (text) => {
        if (text > 0) {
          return text + '位';
        } else {
          return text;
        }
      },
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      width: 255,
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      render: (record, _, index) => {
        const len = record?.length;
        const handleClick = () => {
          setKeyIndex(record.index);
          setDelVisible(true);
        };
        const disabledStyle = {
          color: 'rgba(0, 0, 0, 0.25)',
          cursor: 'not-allowed',
          pointerEvents: 'none' as 'none', // 使用类型断言
        };
        if (keyType === 5) {
          return (
            <a onClick={handleClick} style={index === 0 ? disabledStyle : undefined}>
              删除
            </a>
          );
        } else {
          return (
            <>
              <Space>
                <a
                  onClick={() => setVisible(true)}
                  // style={isDisabled || len === 0 ? disabledStyle : undefined}
                >
                  修改访问控制码
                </a>
                |
                <a
                  onClick={handleClick}
                  style={len === 0 || index === 0 ? disabledStyle : undefined}
                >
                  删除
                </a>
              </Space>
            </>
          );
        }
      },
      width: 250,
      align: 'center',
    },
  ];

  return (
    <>
      <CustomTable
        total={total}
        page={page}
        pageSize={pageSize}
        setPage={setPage}
        setPageSize={setPageSize}
        dataSource={keyTable}
        columns={columns}
        rowClassName={(_record, index) => (index % 2 === 0 ? 'even-row' : 'odd-row')}
        scroll={{ x: 800, y: 800 }}
        rowKey="index"
      />
      <ChangeAccessCodeModal
        keyType={keyType}
        keyIndex={keyIndex}
        visible={visible}
        setVisible={setVisible}
      />
      <KeyDelteModal
        keyIndex={keyIndex}
        keyType={keyType}
        visible={delVisible}
        setVisible={setDelVisible}
        total={total}
        page={page}
        pageSize={pageSize}
        setPage={setPage}
      />
    </>
  );
};

export default React.memo(KeyTable);
